import { defineComponent } from 'vue';
import { IViewMessage } from '@ibiz-template/runtime';
import { useNamespace } from '@ibiz-template/vue3-util';
import './view-message.scss';

export const ViewMessage = defineComponent({
  name: 'ViewMessage',
  props: {
    messages: {
      type: Array<IViewMessage>,
    },
  },
  setup() {
    const ns = useNamespace('view-message');

    const getType = (messageType?: string): string => {
      switch (messageType) {
        case 'WARN':
          return 'warning';
        case 'ERROR':
          return 'error';
        default:
          return 'info';
      }
    };

    return { ns, getType };
  },
  render() {
    if (!this.messages?.length) {
      return null;
    }
    return (
      <div class={[this.ns.b()]}>
        {this.messages?.map(message => {
          return (
            <el-alert
              type={this.getType(message.messageType)}
              title={message.title}
              class={[
                this.ns.e('alert'),
                this.ns.is('no-title', !message.title),
              ]}
              description={message.message}
              closable={message.removeMode !== 0}
            ></el-alert>
          );
        })}
      </div>
    );
  },
});
